import React from "react";
import PrincessDetail from "./components/princessDetail"
import PrincessListed from "./components/princessListed"
import {ProColumns, ProTable} from "@ant-design/pro-table/lib";
import {PageContainer} from "@ant-design/pro-components";
import { usePrincessList } from "@/viewModel/PrincessList/usePrincess";
import {Badge, Button, Space} from "antd";

const PrincessList: React.FC = () => {
  const {
    actionRef,
    isAdmin,
    currentItem,
    openList,
    loadingList,
    activeTabKey,
    ordered,
    searchInput,
    showOrdered,
    handleFetchListData,
    handlerOpenDetail,
    handlerClose,
    handlerCardTabChange,
    handlerPlaceAnOrder,
    handlerShowOrder,
    handlerDelPrincess,
    handlerSearchInput,
    handlerSearchPrincess,
  } = usePrincessList()

  const columns: ProColumns<API.PrincessListApi>[] = [
    {
      title: "序号",
      dataIndex: 'id',
      search: false,
      align: 'center'
    },
    {
      title: "姓名",
      dataIndex: 'name',
      search: true,
      align: 'center'
    },
    {
      title: "年龄",
      dataIndex: 'age',
      search: true,
      align: 'center'
    },
    {
      title: "性别",
      dataIndex: 'gender',
      search: true,
      align: 'center',
      filters: true,
      valueEnum: {
        1: '男',
        2: '女',
      },
      render: (dom) => {
        return(
          <div>{dom === 1 ? '男' : '女'}</div>
        )
      }
    },
    {
      title: "身高",
      dataIndex: 'height',
      search: true,
      align: 'center'
    },
    {
      title: "体重",
      dataIndex: 'weight',
      search: true,
      align: 'center'
    },
    {
      title: "胸围",
      dataIndex: 'bra',
      search: true,
      align: 'center'
    },
    {
      title: "服务时间",
      dataIndex: 'service_hours',
      search: true,
      align: 'center'
    },
    {
      title: "价格",
      dataIndex: 'price',
      search: true,
      align: 'center'
    },
    {
      title: "操作",
      dataIndex: 'active',
      search: false,
      align: 'center',
      width: 200,
      render: (_, entity) => {
        const isExist = ordered.some(existing => existing?.id === entity?.id)
        return(
          <Space>
            <Button type="primary" onClick={() => handlerOpenDetail(entity)}>详情</Button>
            {
              isAdmin ?
                <Button type="primary" danger>删除</Button> :

                <Button
                  type='primary'
                  onClick={isExist ? () => {} : () => handlerPlaceAnOrder(entity)}
                  disabled={isExist}
                >
                  {isExist ? '已下单' : '下单'}
                </Button>
            }
          </Space>
        )
      }
    },
  ]

  return (
    <>
      <PageContainer>
        <ProTable
          headerTitle="可爱的公主们"
          actionRef={actionRef}
          scroll={{ x: 'max-content' }}
          search={{
            labelWidth: 120,
          }}
          request={handleFetchListData}
          columns={columns}
          toolBarRender={() => [
            isAdmin ? (
              <Button
                type="primary"
                key="add"
              >
                添加公主
              </Button>
            ) : (
              <Space>
                <Button
                  type="primary"
                  key="history"
                >
                  历史订单
                </Button>

                <Badge count={ordered.length}>
                  <Button
                    type="primary"
                    key="car"
                    onClick={handlerShowOrder}
                  >
                    已点公主
                  </Button>
                </Badge>
              </Space>
            )
          ]}
        />
      </PageContainer>

      <PrincessDetail
        current={currentItem}
        activeTabKey={activeTabKey}
        open={openList.detailOpen}
        isAdmin={isAdmin}
        ordered={ordered}
        title={"公主详情"}
        width={1200}
        handlerClose={handlerClose}
        handlerCardTabChange={handlerCardTabChange}
        handlerPlaceAnOrder={handlerPlaceAnOrder}
      />

      <PrincessListed
        open={openList.princessListOpen}
        title={"已点公主列表"}
        width={1200}
        ordered={ordered}
        showOrdered={showOrdered}
        searchLoading={loadingList?.searchLoading}
        searchInput={searchInput}
        handlerClose={handlerClose}
        handlerDelPrincess={handlerDelPrincess}
        handlerSearchInput={handlerSearchInput}
        handlerSearchPrincess={handlerSearchPrincess}
      />
    </>
  )
}

export default PrincessList
